@import './color.less';
// design index page

// Color variables (appears count calculates by raw css)
@color4: #50555b; // Appears 2 times
@color5: #808080; // Appears 2 times

// Width variables (appears count calculates by raw css)
@width0: 880px; // Appears 3 times
@width1: 120px; // Appears 2 times
@width2: 100%; // Appears 8 times

@height2: 54px; // Appears 5 times

#page-design-index {
  background-color: #eef2f8;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
  min-width: @width0;
  position: absolute;
  width: @width2;

  .top-nav {
    height: @height2;
    min-width: @width0;
    position: relative;
    width: @width2;
    z-index: 1001;
    .top-nav-wrap {
      border-bottom: 1px solid rgba(202, 119, 119, 0.1);
      align-items: center;
      background-color: @color-main;
      display: flex;
      height: @height2;
      min-width: @width0;
      position: fixed;
      width: @width2;
      .top-left {
        display: flex;
        align-items: center;
        color: @color-black;
        padding-left: 16px;
        width: 200px;
        flex: 0 0 260px;
        .name {
          color: rgba(0, 0, 0, 0.85);
          text-align: center;
          font-size: 16px;
          font-family: Lantinghei SC;
          font-weight: 800;
          line-height: 22px;
          padding-right: 16px;
          border-right: 1px solid #e6e6e6;
        }
        .nav-back {
          color: rgba(0, 0, 0, 0.45);
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC;
          line-height: 22px;
          display: flex;
          align-items: center;
          padding-left: 16px;
          cursor: pointer;
        }
      }
      // .top-title {
      //   color: @color-black;
      //   cursor: pointer;
      //   flex: 1;
      //   padding-left: 3.2rem;
      //   // font-weight: bold;
      //   .input-wrap {
      //     width: 15rem;
      //     :deep(input) {
      //       border: none;
      //     }
      //   }
      // }
      // .top-icon-wrap {
      //   display: flex;
      //   align-items: center;
      //   padding-right: 20px;
      //   height: @height2;
      //   .top-icon {
      //     background-color: rgba(0, 0, 0, 0.4);
      //     border-radius: 5px;
      //     color: @color-white;
      //     cursor: pointer;
      //     font-weight: bold;
      //     margin: 8px;
      //     padding: 5px 8px;
      //     &:hover {
      //       background-color: rgba(0, 0, 0, 0.5);
      //     }
      //   }
      // }
    }
  }
  .page-design-index-wrap {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: 100%;
    overflow: hidden;
    width: @width2;
    .page-design-wrap {
      flex: 1;
    }
  }
  // .page-design-index-wrap ::-webkit-scrollbar {
  //   display: none; /* Chrome Safari */
  // }
}

.color__select {
  margin-bottom: 10px;
  .el-color-picker {
    width: 100% !important;
    .el-color-picker__trigger {
      width: 100% !important;
      padding: 0;
      box-shadow: 0 0 1px 0 #ccc;
      border-radius: 5px;
      overflow: hidden;
      .el-color-picker__color {
        border: none;
        .el-color-picker__color-inner {
          .el-icon {
            display: none;
          }
        }
      }
    }
  }
}

.transparent-bg {
  background-color: #f0f0f0;
  background-image: linear-gradient(
      to top right,
      #fff 25%,
      transparent 25%,
      transparent 75%,
      #fff 75%,
      #fff
    ),
    linear-gradient(to top right, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  overflow: hidden;
  user-select: none;
}
